import React from "react";

import PageContent from '../../PageContent'

import brace from 'brace';

import AceEditor from 'react-ace';

import 'brace/mode/java';

import 'brace/mode/xml';

import 'brace/mode/velocity';

import 'brace/theme/github';

import {Spin} from 'antd';

import { ajax ,showResultMessage,isNull} from '../../common';

import {UIDataTableView} from '../../uicomponents/UIDataComponentView';

import UIView from '../../uicomponents/UIView';

import UIFormView from '../../uicomponents/UIFormView';
/** 
 * 产品模型代码模板管理应用
*/
export default class ProductModelCodeTemplateManageApp extends React.Component {

	render() {
		return (
			<PageContent {...this.props} pageInstance={this} >
				<ProductModelCodeTemplateListPanel />
			</PageContent>
		);
	}
}


/**
 * 模型代码模板列表
 */
class ProductModelCodeTemplateListPanel extends React.Component {

    state = {
		formTitle : '',
		codeTemplateTitel : '',
		codeTemplateFileType : '',
		codeTemplateContent : '',
		modelObjectCodeTemplate : {},
		loading : false,
    }

    actionHandler = (actionEvent) => {

        const {codeTemplateListRef,codeTemplateFormRef,modelObjectCodeTemplateView,selectCodeTemplateIds} = this;

        return {
            refresh : () => {
                codeTemplateListRef.loadData();
            },
            addNewModelCodeTemplate : () => {
                this.setState({formTitle : '新增模型对象代码模板'});
                codeTemplateFormRef.openModal();
            },
            editModelCodeTemplate : () => {
                this.setState({formTitle : '编辑模型对象代码模板'});
                codeTemplateFormRef.openModal(() => {
                    codeTemplateFormRef.setFormData(actionEvent.params);
                });
			},
			editCodeTemplate : () => {
				const modelCodeTemplate = actionEvent.params;
				
				ajax('PRODUCT/MODEL/productModelObject/getModelCodeTemplateById',{id : modelCodeTemplate.id},(data) => {
					this.editContent =  isNull(data.fileContentTemplate) ? '' : data.fileContentTemplate,
					this.setState({
						modelObjectCodeTemplate : data,
						codeTemplateContent : isNull(data.fileContentTemplate) ? '' : data.fileContentTemplate,
						codeTemplateFileType :data.fileType ,
						codeTemplateTitel : '编辑'+ data.templateName 
					});
					modelObjectCodeTemplateView.openModal();
				});
				
			},
			doSave : () => {
				codeTemplateFormRef.getFormData((formData) => {
					formData.templateVersion = 1;
					ajax('PRODUCT/MODEL/productModelObject/saveModelCodeTemplate',formData,() => {
						codeTemplateFormRef.closeModal();
						showResultMessage({
							success : true,
							message : 'message.saveSuccess',
						});
						codeTemplateListRef.loadData();
					});
				});
			},
			deleteModelCodeTemplates : () => {
				const selectIds = isNull(actionEvent.params) ? selectCodeTemplateIds : [actionEvent.params.id];
				ajax('PRODUCT/MODEL/productModelObject/deleteModelCodeTemplate',{ids : selectIds} , () => {
					codeTemplateListRef.loadData();
				});
			}
        };
	}

	onEditorChange = (newValue) => {
		this.editContent = newValue;
	}
	
	codeTemplateEditorActionHandler = (actionEvent) => {
		const {modelObjectCodeTemplateView} = this;

		return {
			close : () => {
				modelObjectCodeTemplateView.closeModal();
			},
			doSave : () => {

				const {modelObjectCodeTemplate} = this.state;
				this.setState({loading : true});
				ajax('PRODUCT/MODEL/productModelObject/saveModelCodeTemplateConetnt',{id :modelObjectCodeTemplate.id,content : this.editContent},(data) => {
					
					this.setState({loading : false,codeTemplateContent : data.fileContentTemplate});
					showResultMessage({
						success : true,
                        message : 'message.saveSuccess',
					});
				});
			}
		}
	}

    render() {
        const tableProps = {
            actionHandler: this.actionHandler,
            searchFormId : 'modelCodeTemplateQueryForm',
			actionGroupId: 'modelCodeTemplateListActionGroup',
			rowActionGroupId: 'modelCodeTemplateRowActionGroup',
			tableConfigId: 'productModelCodeTemplateTable',
			dataUrl: 'PRODUCT/MODEL/productModelObject/queryModelCodeTemplateList',
			selectMode: 'multi',
			autoLoad: true,
			ref: (inst) => { this.codeTemplateListRef = inst },
			onSelectChange:
				(selectRowKeys) => {
					this.selectCodeTemplateIds = selectRowKeys;
				}
			,
			setToolbarState: (toolBar, selectRowKeys) => {
				if (selectRowKeys.length > 0) {
					toolBar.enable('delete');
				}
				else {
					toolBar.disable('delete');
				}
			}
        };

        const formProps = {
            width : 800,
			ref: (inst) => { this.codeTemplateFormRef = inst },
			formConfigId: 'modelCodeTemplateForm',
			actionGroupId: 'saveActionGroup',
			actionHandler: this.actionHandler,
			inPop: true,
			destroyOnClose: true,
			title: this.state.formTitle,
		}

		return (
			<React.Fragment>
				<UIDataTableView {...tableProps} />
				<UIFormView {...formProps} />
				<UIView width={900} inPop={true} title={this.state.codeTemplateTitel}  bordered={false} actionGroupId="saveAndCloseActionGroup" actionHandler={this.codeTemplateEditorActionHandler} ref={(inst) => this.modelObjectCodeTemplateView = inst}>
					<Spin tip="保存中..." spinning={this.state.loading}>
                    	<AceEditor mode="velocity" theme="github" width="100%" onChange={this.onEditorChange} readOnly={false} value={this.state.codeTemplateContent} ref={ (inst) => this.modelObjectCodeTemplateEditor = inst } />
                    </Spin>
                </UIView>
			</React.Fragment>
		);

    }
}